<template>
  <div>
    <a-card class="cardBox coreIndex">
      <div class="tit" slot="title">核心指标 <span>(更新频率：实时)</span><div class="nowTime">{{ nowtime | updatetime }} 星期{{ week|getweek }}</div></div>
      <div class="content">
        <div class="coreWrap">
          <div class="items" v-for="(item, i) in coreIndexArr" :key="`item${i}`" @click="coreIndexClick(item)">
            <div class="item">
              <div :class="`iconBg ico${i}`"><i :class="`iconfont ${item.icon}`"></i></div>
              <div class="name" style="text-align: left">
                <p style="line-height: 16px; padding-top: 8px;">{{ item.name }}></p>
                <p style="font-size: 16px;color: #147ef0; line-height: 24px;">
                  {{ item.descObj.desc }}
                  <i v-if="item.descObj.type" style="color: #f5222d" class="iconfont icon-xiangshang"></i>
                  <i v-if="!item.descObj.type" style="color: #52c41a" class="iconfont icon-paixu"></i>
                  <font color="red" style="font-size: 24px; mso-ansi-font-weight: bold">{{ item.descObj.num }}</font>
                </p>
              </div>
            </div>
            <div class="info">
              <div class="info-p" v-for="(list, index) in item.list" :key="`list${index}`">
                <div class="label">{{ list.label }}：</div>
                <div class="val">{{ list.val }}<span>{{ list.unit }}</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-card>
    <a-modal v-model="coreVisible" width="1000px" :footer="null" :centered="true" :title="coreIndexTit">
      <div v-if="coreIndexType==='personnel'">
        <dv-charts :option="personnelOption" style="width: 100%; height: 420px" />
      </div>
      <div v-if="coreIndexType==='enterprise'">
        <dv-charts :option="enterpriseOption" style="width: 100%; height: 420px" />
      </div>
      <a-row :gutter="16" v-if="coreIndexType==='base'">
        <a-col :span="24">
          <dv-charts :option="baseOption.left" style="width: 100%; height: 420px" />
        </a-col>
        <a-col :span="8">
          <!--<dv-charts :option="serviceOption" style="width: 100%; height: 340px" />-->
        </a-col>
      </a-row>
      <a-row :gutter="16" v-if="coreIndexType==='crew'">
        <a-col :span="24">
          <dv-charts :option="crewOption.left" style="width: 100%; height: 420px" />
        </a-col>
        <a-col :span="8">
          <!--<dv-charts :option="serviceOption" style="width: 100%; height: 340px" />-->
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'HytBoard2',
    filters: {
      updatetime: function (value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
      },
      getweek (e) {
        var week = ['一', '二', '三', '四', '五', '六', '日']
        return week[e - 1]
      }
    },
    data () {
      return {
        timer: null,
        nowtime: new Date(),
        week: moment().format('E'),
        coreIndexArr: [
          {
            type: 'personnel',
            icon: 'icon-renshu',
            name: '人才',
            desc: '使用面持续扩大',
            descObj: {
              desc: '参演流程', type: 0, num: '80%'
            },
            list: [
              { label: '日均活跃人数', val: '2440', unit: '人' },
              { label: '服务对象数', val: '132711', unit: '人' },
              { label: '服务人次', val: '1895836', unit: '次' },
              { label: '当月服务人次', val: '132638', unit: '次' }
            ]
          },
          {
            type: 'enterprise',
            icon: 'icon-24gl-city4',
            name: '企业',
            desc: '营收强势持续增长',
            descObj: {
              desc: '办事效率', type: 1, num: '50%'
            },
            list: [
              { label: '企业总数', val: '1559', unit: '家' },
              { label: '招商库企业数', val: '320', unit: '家' },
              { label: '已招商引资企业', val: '35', unit: '家' },
              { label: '正在洽谈企业', val: '31', unit: '家' }
            ]
          },
          {
            type: 'base',
            icon: 'icon-jujiqu-01',
            name: '基地',
            desc: '使用效率逐步提升',
            descObj: {
              desc: '拍摄筹备时间', type: 0, num: '30%'
            },
            list: [
              { label: '基地数量', val: '226', unit: '座' },
              { label: '已上云基地', val: '204', unit: '座' },
              { label: '线上勘景次数', val: '4022', unit: '次' },
              { label: '转化落地剧组', val: '64', unit: '个' }
            ]
          },
          {
            type: 'crew',
            icon: 'icon-daohangjuzu',
            name: '剧组',
            desc: '拍摄成本有效降低',
            descObj: {
              desc: '拍摄成本', type: 0, num: '10%'
            },
            list: [
              { label: '当年剧组总数', val: '174', unit: '家' },
              { label: '在拍剧组', val: '57', unit: '家' },
              { label: '剧组线上办事', val: '10112', unit: '次' },
              { label: '剧组线上招募', val: '225941', unit: '人次' }
            ]
          }
        ],
        coreVisible: false,
        coreIndexTit: '',
        coreIndexType: '',
        personnelOption: {
          title: {
            text: '使用面持续扩大'
          },
          legend: {
            data: [
              {
                name: '活跃人数',
                color: '#aeeff0'
              },
              {
                name: '月人均参演次数',
                color: '#f1829f'
              }
            ]
          },
          xAxis: {
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月']
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
          },
          yAxis: [
            {
              name: '人',
              data: 'value',
              min: 0,
              max: 17000
            },
            {
              name: '次',
              data: 'value',
              position: 'right',
              min: 0,
              max: 20,
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '活跃人数',
              data: [2447, 1793, 2101, 2821, 3440],
              type: 'bar',
              label: {
                show: true,
                // position: 'center',
                // offset: [0, 0],
                style: {
                  fill: '#333',
                  fontSize: 15
                }
              },
              gradient: {
                color: ['rgba(103, 224, 227, .6)', 'rgba(103, 224, 227, .1)']
              },
              barStyle: {
                stroke: 'rgba(103, 224, 227, 1)'
              }
            },
            {
              name: '月人均参演次数',
              data: [8.4, 7.5, 8.9, 9.9, 10.8],
              type: 'line',
              label: {
                show: true,
                // position: 'center',
                // offset: [0, 0],
                style: {
                  fill: '#333',
                  fontSize: 14
                }
              },
              smooth: true,
              lineArea: {
                show: true,
                gradient: ['rgba(251, 114, 147, 1)', 'rgba(251, 114, 147, 0)']
              },
              lineStyle: {
                stroke: 'rgba(251, 114, 147, 1)',
                lineDash: [3, 3]
              },
              linePoint: {
                style: {
                  stroke: 'rgba(251, 114, 147, 1)'
                }
              },
              yAxisIndex: 1
            }
          ]
        }, // 人才
        enterpriseOption: {
          title: {
            text: '应收持续强势增长'
          },
          legend: {
            data: [
              {
                name: '影视企业数',
                color: '#aeeff0'
              },
              {
                name: '营收趋势',
                color: '#f1829f'
              }
            ]
          },
          xAxis: {
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月']
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
          },
          yAxis: [
            {
              name: '家',
              data: 'value',
              min: 0,
              max: 1680
            },
            {
              name: '亿元',
              data: 'value',
              position: 'right',
              min: 0,
              max: 180,
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '影视企业数',
              data: [1530, 1537, 1542, 1545, 1559],
              type: 'bar',
              label: {
                show: true,
                // position: 'center',
                // offset: [0, 0],
                style: {
                  fill: '#333',
                  fontSize: 14
                }
              },
              gradient: {
                color: ['rgba(103, 224, 227, .6)', 'rgba(103, 224, 227, .1)']
              },
              barStyle: {
                stroke: 'rgba(103, 224, 227, 1)'
              }
            },
            {
              name: '营收趋势',
              data: [38.09, 52.76, 68.96, 103.39],
              type: 'line',
              smooth: true,
              label: {
                show: true,
                // position: 'center',
                // offset: [0, 0],
                style: {
                  fill: '#333',
                  fontSize: 14
                }
              },
              lineArea: {
                show: true,
                gradient: ['rgba(251, 114, 147, 1)', 'rgba(251, 114, 147, 0)']
              },
              lineStyle: {
                stroke: 'rgba(251, 114, 147, 1)',
                lineDash: [3, 3]
              },
              linePoint: {
                style: {
                  stroke: 'rgba(251, 114, 147, 1)'
                }
              },
              yAxisIndex: 1
            }
          ]
        }, // 企业
        baseOption: {
          left: {
            title: {
              text: '基地使用率'
            },
            xAxis: {
              // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月']
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
            },
            yAxis: {
              name: '百分比(%)',
              data: 'value',
              min: 0,
              max: 100
            },
            series: [
              {
                data: [51.60, 52.50, 54.50, 59.60, 67.06],
                type: 'line',
                label: {
                  show: true,
                  // position: 'center',
                  // offset: [0, 0],
                  style: {
                    fill: '#333',
                    fontSize: 14
                  }
                },
                smooth: true,
                lineArea: {
                  show: true,
                  gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
                }
              }
            ]
          },
          right: {}
        },
        crewOption: {
          left: {
            title: {
              text: '剧组持续增长'
            },
            xAxis: {
              // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月']
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
            },
            yAxis: [
              {
                name: '家',
                data: 'value',
                min: 0,
                max: 400
              }
            ],
            series: [
              {
                name: '剧组数量',
                data: [14, 31, 55, 76, 114],
                type: 'bar',
                label: {
                  show: true,
                  // position: 'center',
                  // offset: [0, 0],
                  style: {
                    fill: '#333',
                    fontSize: 15
                  }
                },
                gradient: {
                  color: ['rgba(103, 224, 227, .6)', 'rgba(103, 224, 227, .1)']
                },
                barStyle: {
                  stroke: 'rgba(103, 224, 227, 1)'
                }
              }
            ]
          },
          right: {}
        }
      }
    },
    mounted () {
      const _this = this
      this.timer = setInterval(() => {
        _this.nowtime = new Date()
      }, 1000)
    },
    beforeDestroy () {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    watch: {
    },
    methods: {
      coreIndexClick (data) {
        // type: personnel 人才  enterprise 企业  base 基地 crew 剧组
        // this.coreIndexTit = '剧组持续增长'
        this.coreIndexType = data.type
        this.coreVisible = true
      }
    }
  }
</script>

<style scoped lang="less">
  .cardBox {
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0,0,0,.15);
    .tit {
      position: relative;
      padding-left: 8px; font-size: 20px;
    }

    .tit::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      background: #1890ff
    }
  }
  .coreIndex {
    .content {
      /*display: grid; grid-template-columns: 1fr 1fr 1fr;*/
    }
    .tit span {font-size: 16px; color: #666}
    .tit .nowTime { display: inline-block; float: right; font-size: 18px; color: #444; font-weight: normal}
    .coreWrap { display: grid; grid-template-columns: 25% 25% 25% 25%;
      .items { margin: 0 5px; padding: 30px 0; background: #e7f8ff; border-radius:10px; display: flex; flex-wrap: wrap; cursor: pointer; transition: all 0.3s }
      .items:hover { background: #b9e0fb; transition: all 0.3s;
        .item {margin-left:30px; transition: all 0.3s;}
      }
      .item { text-align: center; margin-left:20px;padding-bottom: 20px; display: flex; transition: all 0.3s;
        .iconBg {
          background: #6a92ed; display: inline-block;
          width: 56px;
          line-height: 56px;
          height: 56px;
          border-radius: 50%; text-align: center;
          .iconfont {  font-size: 34px; color: #fff;}
        }
        .ico0{ background: #6a92ed}
        .ico1{ background: #E85894}
        .ico2{ background: #a970e1}
        .ico3{ background: #ea7146}
        .name { text-align: center; font-size: 18px;
          p {margin-bottom: 0; padding-left: 15px;}
          .iconfont { font-size: 18px;}
        }
      }
      .info { padding: 0 20px; width: 100%; font-size: 15px;
        .info-p { width: 100%; padding: 8px 5px; line-height: 1; display: flex; border-bottom: 1px solid #d4eaf3;}
        .val { margin-left: auto; font-size: 18px; font-weight: bold}
        span { font-size: 15px; font-weight: initial; margin-left: 4px;}
      }

    }
  }
  .coreBox { display: grid; grid-template-columns: 1fr 1fr 1fr; padding-left: 60px}
</style>
